*{
	padding: 0;
	margin: 0;
	font-family: 'STXinwei';
}
body{
	overflow-x:hidden;
	overflow-y: hidden;
}
.wz{width: 300px;height: 300px;/*border: 1px solid #000;*/
	margin:150px auto;perspective: 200000px;/*观察距离*/
}
.box{
	width: 300px;height: 300px;/*3D变换*/transform-style: preserve-3d;
	/*transform: rotateX(45deg) rotateY(45deg);*/
	animation: xz 4s linear infinite;/*调用动画*/
	display: flex;
}
@keyframes xz{
	0%{transform: rotateX(0deg) rotateY(0deg);}
	100%{transform: rotateX(360deg) rotateY(360deg);}
}
.face{width: 300px;height: 300px;     /*初始化位置*/
		transform-style: preserve-3d;position: absolute;
}
.top{/*background-color: red;*/transform: translateZ(150px);}
.bottom{/*background-color: green;*/transform: translateZ(-150px);}
.left{/*background-color: orange;*/transform: translateX(-150px) rotateY(90deg);}
.right{/*background-color: pink;*/transform: translateX(150px) rotateY(90deg);}
.before{/*background-color: blue;*/transform: translateY(150px) rotateX(90deg);}
.after{/*background-color: yellow;*/transform: translateY(-150px) rotateX(90deg);}

.face div:nth-child(1),.face div:nth-child(3),.face div:nth-child(7),.face div:nth-child(9){animation: z1 4s ease-in-out infinite;}/*infinite是持续循环*/
.face div:nth-child(2),.face div:nth-child(4),.face div:nth-child(6),.face div:nth-child(8){animation: z2 4s ease-in-out infinite;}
.face div:nth-child(5){animation: z5 4s ease-in-out infinite;}

@keyframes z1{/*scale是缩放*/
	0%{transform: translateZ(0px) scale(1) rotateZ(0deg);}
	22%{transform: translateZ(150px) scale(1) rotateZ(360deg);}
	41%{transform: translateZ(150px) scale(1.5) rotateZ(0deg);}
	62%{transform: translateZ(150px) scale(1) rotateZ(360deg);}
	80%{transform: translateZ(0px) scale(1) rotateZ(0deg);}
}
@keyframes z5{
	0%{transform: translateZ(0px) scale(1) rotateZ(0deg);}
	40%{transform: translateZ(60px) scale(2) rotateZ(0deg);}
	80%{transform: translateZ(0px) scale(1) rotateZ(0deg);}
}
@keyframes z2{
	0%{transform:rotateX(0deg);}
	40%{transform:rotateX(540deg);}
	80%{transform:rotateX(0deg);}
}
#ts a{
	text-decoration: none;
}
#ts{
	font-size: 26px;
	position: absolute;
	bottom: 10%;
	right: 15%;
	color: #0BC6FF;
	z-index: 2;
}
#ts #tz{
	font-size: 30px;
	
}
/*@media screen and (min-width: 768px){
	#ts{
		text-align: center;
		background-color: blue;
	}
}*/
.bg{
	margin:0 auto;
	width:100%;
	height:100%;
	background-color:#000;
	position:absolute;
	top: 0;
	z-index: -1;
	animation: dc 5s;
	animation-delay: 1s;
	}
@keyframes dc{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0.5;
	}
}
.bg canvas {
	width:100%;height:100%;
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	z-index:-1;
	}